<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人空间</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--css-->
    <link href="../static/css/staff.css" rel="stylesheet"/>
    <link href="../static/css/folder.css" rel="stylesheet"/>
    <link href="../static/css/msg.css" rel="stylesheet"/>
    <link href="../static/css/loading.css" rel="stylesheet">
    <link href="../static/css/faceCheck.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top ">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header logo">
                <a class="navbar-brand" href="project.html"><h1 class="atitle">智能外包</h1></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="drop-down">
                        <a id="username" href="#"><span th:text="${userName}"></span><span class="caret" id="caret"></span></a>
                        <ul class="drop-down-content">
                            <li><a href="#" >账号管理</a></li>
                            <li><a href="#" >消息</a></li>
                            <li><a th:href="@{/logout}">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div><!-- /.container-fluid -->

    </nav>
    <div class="jumbotron">
        <div class="container">
            <h1>Hi, employee!</h1>
            <p class="jumbotron-text">您可以在这里查看你的项目，得到自己的任务，并上传你的工作成果。</p>
            <!--<p><a class="btn btn-primary btn-lg" href="#fabu" role="button">发布新外包</a></p>-->
        </div>
    </div>
    <div class="row">
        <div class="leftSide col-md-2">
            <div class="personalInfo">
                <a href="#info" class="headPortrait">
                    <img src="../static/img/headPortrait.png" id="headPortrait"/>
                </a>
                <div id="nickname">
                    <p id="personName" th:text="${userName}"></p>
                    <button type="submit"  class="btn btn-sign btn-primary">签到</button>
                </div>
            </div>
            <div class="funcList">
                <ul class="funcListUl ">
                    <li class="active" id="li_info_item"><a href="#info" id="info_item" data-toggle="tab">个人档</a></li>
                    <li id="li_xm_item"><a href="#project" id="xm_item" data-toggle="tab">项目看板</a></li>
                    <li id="li_tz_item"><a href="#inform" id="tz_item" data-toggle="tab">任务通知</a></li>
                    <li id="li_rw_item"><a href="#task" id="rw_item" data-toggle="tab">我的任务</a></li>
                    <li id="li_cg_item"><a href="#achievement" id="cg_item" data-toggle="tab">工作成果</a></li>
                    <li id="li_zl_item"><a href="#resources" id="zl_item" data-toggle="tab">资料库</a></li>

                </ul>
            </div>
        </div>
        <div class="mainRight tab-content col-md-offset-1 col-md-8">
            <div class="tab-pane fade in  active" id="info">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">个人档</a></li>
                    <li class="active">个人资料</li>
                </ol>
                <div class="panel panel-success">
                    <!-- Default panel contents -->
                    <div class="panel-heading text-center">个人资料</div>
                    <div class="panel-body">
                        <div id="profile">
                            <div class="text-right">
                                <button class="btn btn-info" id="edit"><span class="glyphicon glyphicon-pencil"></span> 编辑</button>
                            </div>
                            <div class="col-md-6">
                                <strong><span class="glyphicon glyphicon-user red"></span> 姓名:</strong>
                                <span id="true_name1"></span>
                            </div>
                            <div  class="col-md-6">
                                <strong><span class="glyphicon glyphicon-asterisk red"></span> 性别:</strong>
                                <span id="gender1"></span>
                            </div>
                            <div class="col-md-6">
                                <strong><span class="glyphicon glyphicon-phone-alt red"></span> 电话:</strong>
                                <span id="telephone1"></span>
                            </div>
                            <div class="col-md-6">
                                <strong><span class="glyphicon glyphicon-credit-card red"></span> 公司:</strong>
                                <span id="company1"></span>
                            </div>
                            <div class="col-md-12">
                                <strong><span class="glyphicon glyphicon-send red"></span> 职业:</strong>
                                <span id="job1"></span>
                            </div>
                            <div class="col-md-12">
                                <strong><span class="glyphicon glyphicon-tree-conifer red"></span> 保密协议签订:</strong>
                                <span id="promise"></span>
                            </div>
                            <div class="col-md-12">
                                <strong><span class="glyphicon glyphicon-tree-deciduous red"></span> 个人介绍:</strong>
                                <span id="introduce1"></span>
                            </div>
                        </div>
                        <div id="second_profile" style="display:none;">
                            <form name="update_profile" id="update_profile">
                                <div class="form-group">
                                    <label for="true_name">姓名</label>
                                    <input type="text" name="true_name" id="true_name" class="form-control" value=""/>
                                </div>
                                <div class="form-group">
                                    <label for="gender">性别</label>
                                    <select name="gender" id="gender" class="form-control">
                                        <option>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="company">公司</label>
                                    <input type="text" name="company" id="company" class="form-control"/>
                                </div>
                                <div class="form-group">
                                    <label for="job">职业</label>
                                    <input type="text" name="job" id="job" class="form-control"/>
                                </div>
                                <div class="form-group">
                                    <label for="introduce">个人介绍</label>
                                    <textarea id="introduce" name="introduce" class="form-control" ></textarea>
                                </div>

                                <button class="btn btn-success btn-block" id="save" type="button">保存</button>


                            </form>
                        </div>
                    </div>

                </div>
            </div>
            <div class="tab-pane fade" id="project">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">项目</a></li>
                    <li class="active">项目看板</li>
                </ol>
                <table class="table">
                    <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>报名截止时间</th>
                        <th>项目截止时间</th>
                        <th>项目类别</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody id="kBody">

                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="inform">

            </div>
            <div class="tab-pane fade" id="task">

            </div>
            <div class="tab-pane fade" id="achievement">
                <div id="upload" style="width:65%; margin:0 auto;">
                    <form id="uploadAchievement" name="uploadAchievement" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="projectName">项目名</label>
                            <input class="form-control input-lg" name="outsourcingName" id="projectName" type="text"  value="" placeholder="请输入项目名" />
                        </div>
                        <div class="form-group">
                            <label for="fileDescription">文件描述</label>
                            <input type="text" class="form-control input-lg"  name="fileDescription"  id="fileDescription" value=""  placeholder="请输入文件描述" />
                        </div>
                        <div class="form-group">
                            <label>预计项目进度</label>
                            <div class="input-group">
                                <input type="text" class="form-control input-lg" name="progress" id="progress" value="" placeholder="请输入项目进度" />
                                <span class="input-group-addon">%</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>上传文件</label>
                            <input type="file" name="upl" id="upl" multiple="multiple"/>
                        </div>
                        <div class="text-right">
                            <button type="submit" class="btn btn-success bnt-lg" id="uplBtn">Upload</button>
                        </div>
                    </form>
                </div>
                <p id="loading"><img src="../static/img/loading.gif"/></p>
            </div>
            <div class="tab-pane fade" id="resources"  style="position:relative;">
                <div id="shoot" style="position:absolute;top:0;right:0;">
                    <div>
                        <video src="" preload="preload" width="100" height="100" id="video"></video>
                        <canvas id="canvas" width="100" height="100"></canvas>
                    </div>
                </div>
                <div id="data">



                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <p class="text-center">Copyright &copy; 2018 智能外包管理平台. All Rights Reserved | Design by <span>杨玉卿&张海洋&田宇</span></p>
    </div>
    <p id="bg"></p>
    <script src="../static/js/setRequestHeader.js"></script>
    <script src="../static/js/staff_resources.js"></script>
    <script src="../static/js/staff_sign.js"></script>
    <script src="../static/js/staff_info.js"></script>
    <script src="../static/js/staff_project.js"></script>
    <script src="../static/js/staff_receiveTask.js"></script>

    <script src="../static/js/staff_uploadAchievement.js"></script>
    <script src="../static/js/staff_inform.js"></script>
</body>
</html>